import React, { useState, useEffect } from 'react'
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { Grid, Avatar, Badge, Typography, Button } from "@material-ui/core"
import { useSelector, useDispatch } from 'react-redux'
import { Section } from 'components/organisms';
import { Icon } from 'components/atoms';
import { Upload } from "antd"
import { callUploadFileNews } from 'utils/networking';
import { setProfile } from 'redux/actions/AuthActions';
import { useHistory } from "react-router-dom";

const useStyles = makeStyles(theme => ({
    root: {
        width: "100%",
        maxWidth: "1400px",
        margin: "0 auto",
        overflow: "hidden",
        padding: "20px",
        [theme.breakpoints.up('md')]: {
            padding: "50px",
        },
    },
    typography: {
        fontSize: "20px",
        textTransform: "uppercase",
        color: "#fff",
        [theme.breakpoints.up('md')]: {
            fontSize: "32px",
        },
    },
    typography1: {
        fontSize: "14px",
        lineHeight: "20px",
        textTransform: "uppercase",
        color: "#fff",
        marginBottom: "20px",
        [theme.breakpoints.up('md')]: {
            fontSize: "16px",
        },
    },
    typography2: {
        fontSize: "12px",
        lineHeight: "normal",
        textTransform: "capitalize",
        color: "#fff",
        [theme.breakpoints.up('md')]: {
            fontSize: "14px",
        },
    },
    typography3: {
        fontSize: "12px",
        lineHeight: "normal",
        textTransform: "none",
        color: "#fff",
        opacity: 0.7,
        marginTop: "10px",
    },
    btn: {
        color: "#fff",
        backgroundColor: "#44444f",
        textTransform: "capitalize",
    },
    btn1: {
        color: "#000",
        backgroundColor: "#FFF61E",
        fontSize: "12px",
        lineHeight: "12px",
        borderRadius: "16px",
        padding: "8px 12px",
        cursor: "pointer",
    },
    grid: {
        marginTop: "40px",
    },
    gridItem: {
        padding: "5px",
    },
    card: {
        backgroundColor: "#1C1C24",
        borderRadius: "8px",
        padding: "15px",
        height: "100%"
    },
    card1: {
        backgroundColor: "#1E75FF",
    },
    icon: {
        padding: "8px",
        width: "45px",
        height: "45px",
        borderRadius: "50%",
        backgroundColor: "#FFFFFF",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
    },
    ad:{
        width: "100%",
        overflow: "hidden",
        height: "calc(50vh - 64px)",
        position: "relative",
        padding:"50px 0",
        [theme.breakpoints.up('sm')]: {
            height: "calc(70vh - 64px)",
        },
        [theme.breakpoints.up('md')]: {
            height: "calc(90vh - 64px)",
        },
    },
    backgroundImage: {
        width: '100%',
        height: '100%',
        position: 'absolute',
        backgroundSize: '100% 100%',
        [theme.breakpoints.up('sm')]: {
            backgroundSize: '100% 130%',
        },
        [theme.breakpoints.up('md')]: {
            backgroundSize: '100% 150%',
        },
        [theme.breakpoints.up('lg')]: {
            backgroundSize: '100% 180%',
        },
        zIndex: 1
    },
}));

function MainContent(props) {
    const { data, className, ...rest } = props;
    const classes = useStyles();
    const dispatch = useDispatch()
    const history = useHistory();

    const profileData = useSelector((state) => state.auth.profileData)
    console.log(profileData);

    const [backgroundImg, setBackgroundImg] = useState(null);

    const moveDetailPage = (id) => {
        history.push("follow", id);
    }

    return (
        <div className={clsx(classes.root)} >
            <Grid container justifyContent='space-between'>
                <Grid item>
                    <Typography className={classes.typography} variant='h3'>{profileData.username}</Typography>
                </Grid>
                <Grid item>
                    <Button className={classes.btn}>
                        <Icon
                            fontIconClass="fa fa-times"
                            style={{ marginRight: "10px" }}
                        />
                        Download Report
                    </Button>
                </Grid>
            </Grid>

            <Grid container justifyContent='space-between' className={classes.grid}>
                <Grid item className={classes.gridItem} xs={12} md={6} lg={3}>
                    <div className={classes.card}>
                        <Typography className={classes.typography1}>TOTAL EARNINGS (ALL TIME)</Typography>
                        <Grid item container justifyContent='space-between' >
                            <Grid item xs={6}>
                                <Typography className={classes.typography} >$4,212</Typography>
                            </Grid>
                            <Grid item xs={6}>
                                <Typography className={classes.typography2}> Stream: $41.04</Typography>
                                <Typography className={classes.typography2}>  Subscription: $75.00</Typography>
                            </Grid>
                        </Grid>
                    </div>
                </Grid>
                <Grid item className={classes.gridItem} xs={12} md={6} lg={3}>
                    <div className={classes.card}>
                        <Typography className={classes.typography1}>LAST MONTH EARNINGS</Typography>
                        <Grid item container >
                            <Grid item xs={6}>
                                <Typography className={classes.typography} >$2,120</Typography>
                            </Grid>
                            <Grid item xs={6}>
                                <Typography className={classes.typography2}> Stream: $4.47</Typography>
                                <Typography className={classes.typography2}>  Subscription: $5.00</Typography>
                            </Grid>
                        </Grid>
                    </div>
                </Grid>
                <Grid item className={classes.gridItem} xs={12} md={6} lg={3}>
                    <div className={classes.card}>
                        <Typography className={classes.typography1}>CURRENT BALANCE</Typography>
                        <Grid item container >
                            <Grid item xs={6}>
                                <Typography className={classes.typography} >$1,350</Typography>
                            </Grid>
                            <Grid item xs={6} container justifyContent='center' alignItems='center'>
                                <div className={classes.btn1}>
                                    REQUEST PAYMENT
                                </div>
                            </Grid>
                        </Grid>
                    </div>
                </Grid>
                <Grid item className={clsx(classes.gridItem)} xs={12} md={6} lg={3}>
                    <div className={clsx(classes.card, classes.card1)}>
                        <Grid item container >
                            <Grid item xs={3} container justifyContent='center' alignItems='center'>
                                <div className={classes.icon}>
                                    <Icon
                                        fontIconClass="fas fa-star"
                                        style={{ color: "#FFC542", }}
                                    />
                                </div>
                            </Grid>
                            <Grid item xs={9} >
                                <Typography className={classes.typography2}> Tip the platform</Typography>
                                <Typography className={classes.typography3}>  We do not take a cut of your revenue, but we could use tips to keep the platform maintained and updated. Easily support Crowded directly from your revenue. </Typography>
                            </Grid>
                        </Grid>
                    </div>
                </Grid>
            </Grid>
            <div className={classes.ad}>
                <div style={{ backgroundImage: `url(${profileData ? (backgroundImg ? backgroundImg : profileData.backImage) : "https://assets.maccarianagency.com/the-front/photos/rental/hero-bg-image@2x.jpg 2x"})` }} className={classes.backgroundImage}>
                </div>
            </div>

        </div>
    )
}

MainContent.propTypes = {
    /**
     * External classes
     */
    className: PropTypes.string,
};

export default MainContent

